Adding a URL Field to a Form

The URL field is used to enter only the Web addresses, in their correct format. If the URL is not entered in the correct format then the URL field validates the text field to enter Web address. You can define this text field as <input type=”url”> in the form. If a user tries to enter a value other the Web address in the URL field, such as http://www.google.co.in, then an error message is displayed. The two important attributes of the URL field are as follows:

  • autofocus: Helps in keeping the focus of mouse pointer on the input field.
  • pattern: defines the regular expression of the text that should be entered in the text field, such as defining the format in which an email address should be entered.

Let’s do the following steps to add URL field:


<!DOTYPE html>
<head>
    <title>Adding URL Field</title>
</head>
<body>
    <h2>Example of URL Field </h2>
    <form>
        <h4> <label for=”URL”>Enter URL:</label></h4>
        <input id=”url” name=”url” type=”url” autocomplete=”on” autofocus=”on” />
        <input type=”submit” value=”Go” />
    </form>
</body>
</html>

Save the document with the name AddingURL.html and open on browser.

Note: The url input type attribute is not supported in Internet Explorer; therefore open on other browser such as: Opera, Chrome and Firefox.